<script setup lang="ts">
import { onMounted, ref, unref, reactive } from 'vue'
import { useBaseApi } from '@/api/base'
import { clone } from 'xe-utils'
import { dayjs, ElMessage } from 'element-plus'
import mittBus from '@/utils/mitt'
import type { VxeGridProps } from 'vxe-table'
import type { BusinessUIAction } from '@/types/custom'

const { CustomRequest } = useBaseApi()

interface Props {
  _action?: BusinessUIAction
  _params: TypedAny
  defaultParams?: TypedAny
}

interface RowType {
  amt_borrow: number
  own_user_name: string
  att_date: string
  begin_time: string
  end_time: string
  over_time: number
  can_duduct_times: number
  decuct_times: number
  wf_status_name: string
  item_name: string
}

const props = defineProps<Props>()
const emit = defineEmits(['close', 'fetch'])

const xGrid = ref()
const loading = ref(false)
const params = ref<TypedAny>({})
const gridOptions = reactive<VxeGridProps<RowType>>({
  keepSource: true,
  showOverflow: true,
  height: 'auto',
  loading: false,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'own_user_name', title: '加班人', width: 100 },
    { field: 'att_date', title: '加班日期', width: 100 },
    { field: 'begin_time', title: '开始加班时间', width: 120 },
    { field: 'end_time', title: '加班结束时间', width: 120 },
    { field: 'over_time', title: '加班时长小时', width: 120 },
    { field: 'can_duduct_times', title: '加班可调休小时', width: 120 },
    // {field: 'decuct_times', title: '本次调休小时', width: 120},
    {
      field: 'decuct_times',
      title: '本次冲抵金额',
      width: 150,
      slots: {
        default: 'decuct_times'
      }
    },
    { field: 'wf_status_name', title: '加班申请状态', width: 120 },
    { field: 'item_name', title: '加班项目', width: 150 }
  ]
})

const gridData = ref<RowType[]>([])

/**
 * 格式化参数
 */
const onFormatParams = () => {
  if (props._action && props.defaultParams) {
    params.value = {}
    const default_value_parse = props._action.default_value_parse
    if (Object.keys(default_value_parse).length) {
      for (const k in default_value_parse) {
        params.value[k] = props.defaultParams[k] || default_value_parse[k]
      }
    } else {
      params.value = clone(props.defaultParams, true)
    }
  }
}

/**
 * 获取路径
 */
const getUrl = (): string => {
  const param = unref(params)
  if (param.leavetime_id) {
    // 请假申请 - 获取可冲抵的加班时间
    return '/api-mis/OALeavetime/leavetime_get_overtime_deducts'
  } else {
    // 请假申请 - 获取可冲抵的加班时间
    return '/api-mis/OALeavetime/leavetime_get_overtime_deducts'
  }
}

/**
 * 获取报销申请可冲抵的借款明细
 */
const onFetch = () => {
  loading.value = true
  const param = unref(params)
  CustomRequest({
    url: getUrl(),
    method: 'get',
    params: param
  })
    .then(({ data }) => {
      console.log(data)
      data.forEach((v: RowType) => {
        v.att_date = dayjs(v.att_date).format('YYYY-MM-DD')
        v.begin_time = dayjs(v.begin_time).format('YYYY-MM-DD HH:mm')
        v.end_time = dayjs(v.end_time).format('YYYY-MM-DD HH:mm')
      })
      gridData.value = data
    })
    .finally(() => (loading.value = false))
}

/**
 * 保存
 */
const onSave = async () => {
  if (xGrid.value) {
    const param = unref(params)
    const { fullData } = xGrid.value.getTableData()
    return CustomRequest({
      url: getUrl(),
      method: 'post',
      params: param,
      data: { rows: fullData }
    }).then(({ data }) => {
      if (data && data.forms && data.forms.length) {
        // 把数据发送给父级
        mittBus.emit('onUpdateParent', data)
      }
      ElMessage.success('保存成功')
      emit('fetch')
      return data
    })
  } else {
    return Promise.resolve()
  }
}

onMounted(() => {
  // console.log(props._action)
  // console.log(props._params)
  // console.log(props.defaultParams)
  onFormatParams()
  onFetch()
})

defineExpose({ onSave })
</script>

<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions" :data="gridData" :loading="loading" append-to-body>
    <template #decuct_times="{ row, column }">
      <el-input-number v-model="row[column.field]" placeholder="本次调休小时" :min="0" />
    </template>
  </vxe-grid>
</template>
